iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 25
1
自我挑戰組

人生第一次的SideProject系列 第 25

[Day 25 ] ASP.NET上運作Angular(一)

  • 分享至 

  • xImage
  •  

關於ASP.NET搭配Angular的方法,這邊按照官網教學跑了一次(好吧其實沒有100%照著做),以下是實作狀況。

軟體是使用Visual Studio 2019,開啟後選「ASP.NET Core WEB 應用程式」
https://ithelp.ithome.com.tw/upload/images/20191012/20118140rDVSD7hFlj.jpg
為專案取好名字後,專案框架選「Angular」。
https://ithelp.ithome.com.tw/upload/images/20191011/20118140vvVW1r29jj.jpg
等程式跑完,會看到旁邊已經有一些VS準備好的基本檔案。
https://ithelp.ithome.com.tw/upload/images/20191012/20118140gHqldaGiUu.jpg
基本架構和之前做MVC教學時的感覺很類似,比較特別的是沒了View資料夾而是多了一個「ClientApp」,裡面有一些Angular相關的檔案,和在VSCode裡Angular的層級架構基本一致。
https://ithelp.ithome.com.tw/upload/images/20191011/201181406fE8PEGE46.jpg
https://ithelp.ithome.com.tw/upload/images/20191011/2011814025lW7GGPA7.jpg

這裡二話不說先建置,大概是第一次build的關係terminal跑了滿久的。建置完成後localhost打開,得到如下畫面,看來是成功了。
https://ithelp.ithome.com.tw/upload/images/20191011/20118140wo3ZfGm3h7.jpg

這邊試著使用Angular的寫法來新增東西,設個title變數,然後在html檔案中呼叫:
https://ithelp.ithome.com.tw/upload/images/20191011/20118140KQpE7cuaJt.jpg

(下面的router-outlet會連到預設的home.component.html,被我先註解掉了)
https://ithelp.ithome.com.tw/upload/images/20191011/20118140GbMiQ0FYWD.jpg

成功執行~
https://ithelp.ithome.com.tw/upload/images/20191012/20118140L3JZaltfH9.jpg

這樣一來在ASP.NET上測試使用Angular環境就建置完成,明天再繼續在這個專案上增加東西囉~

= = = = =

你今天的努力,
是否有跟未來的夢想
同一個等級?


上一篇
[Day 24 ] 角色卡部署至Github測試上線
下一篇
[Day 26 ] ASP.NET上運作Angular(二)
系列文
人生第一次的SideProject33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言